<template>
	<view class="container">
		<!-- <view class="question">
			请输入问题：
			<textarea id="addquestion" adjust-position="true" auto-height="true" />
		</view> -->
		<view v-if="isPatient">
		<view>
			<view class="uni-list-cell-left">问题：</view>
			<view class="uni-textarea">
				<textarea  @input="inputChange" class="uni-input" placeholder-style="color:#999999" placeholder="请输入..."/>
			</view>
		</view>
		<!-- <button class="submitbtn" @click="submitquestion()">提交</button> -->
		<view class="uni-btn-v">
		    <button form-type="submit" @click="submitquestion()">提交</button>
		</view>
		</view>
		<view class="line"></view>
		<text class="userquestion">用户咨询问题如下：(点击查看详情)</text>
		<!-- <view class="item" v-for="item in list" @click="questions(item.id)">
			{{item.id}}.
			{{item.question}}
		</view> -->
		<view class="item" v-for="item in list" @click="questions(item.id)">
		
			<view class="content">
				{{item.id}}.
				{{item.question}}
			</view>
			<view class="contentTime">
				{{item.time}}
			</view>
		
		</view>
	</view>
</template>

<script>
	import { addQuestion, viewquestionList } from '@/api/index.js'
	export default {
		data() {
			return {
				list:[],
				isPatient: false,
				question: '',
				id: ''
			}
		},
		onLoad() {
			this.isPatient = uni.getStorageSync('user').patient
			this.id = uni.getStorageSync('user').id
			this.getList()
		},
		methods:{
			getList() {
				let param = {
					current: 1,
					size: 500
				}
				viewquestionList(param).then(res => {
					if(res.code !== 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.list = res.data.rows || []
				})
			},
			submitquestion(){
				let param = {
					question:this.question,
					id: this.id,
				}
				addQuestion(param).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if(res.code === 200) {
						this.getList()
					}
				})
			},
			inputChange(e){
				this.question = e.detail.value
			},
			questions(id) {
				uni.navigateTo({
					url:'/pages/question/info?id='+id
				})
			}
			
		}
	}
</script>

<style>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.uni-list-cell-left {
		padding-right: 20rpx;
		color: #545454;
		font-size: medium;
		white-space: pre-wrap;
	}
	.uni-input {
		color: #4a8d9c;
		font-size: medium;
		padding-left: 20rpx;
	}
	.uni-textarea {
		border:1px solid #999999;
		border-radius:10px;
		margin-top: 10rpx;
		padding: 10rpx;
	}
	/* textarea {
		height: auto;
		width: auto;
		border: 3px solid #550000;
		height: auto;
		word-wrap: break-word;
		white-space: pre-wrap;
		font-size: 50rpx;
	} */
	button {
	  width: 100%;
	  margin-top: 100rpx;
	  background-color: rgba(74,141,156,0.9);
	  color: white;
	  border-radius: 98rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	}
	
	
	button::after {
	  border-radius: 98rpx;
	  border: 0; 
	}
	.uni-btn-v{
		margin-top: 50rpx;
	}
	/* .submitbtn {
		border: 3px solid #1919da;
		align-items: center;
		margin-top: 50rpx;
	} */
	.line {
		margin-top: 40rpx;
		width: 100%;
		height: 5rpx;
		background-color: #F5F5F5;
	}
	.item {
		padding: 20rpx;
		color: #545454;
		margin-bottom: 5rpx;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;;
	}
	.content {
		display: flex;
		flex-direction: column;
	}
	.contentTime {
		margin-top: 20rpx;
		color: #999999;
		font-size: small;
		text-align: end;
	}
	.userquestion{
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		height: 20%;
		display: flex;
		font-size: larger;
		font-weight: bold;
	}
	/* 
	.item{
		background-color: #ffffff;
		height: 120rpx;
		margin: 10rpx;
		color: #0000ff;
	} */
</style>
